<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      size="mini"
      label-width="120px"
    >
      <div>
        <el-row>
          <el-col :span="24" :md="12">
            <el-form-item label="股票名" prop="stock_name">
              <label style="color: #1b51d9; cursor: pointer; font-weight: bold;" @click="openXq(form.code)">{{ form.stock_name }}</label>
            </el-form-item>
            <el-form-item label="股票代码" prop="code">
              <div class="stk_flg_cell">
                <el-image mode="aspectFit" class="kimg" :src="form.market_flag" ></el-image>
                {{ form.code }}
              </div>
            </el-form-item>
            <el-form-item label="仓位建议" prop="positioning_advice">
              {{ form.positioning_advice }}
            </el-form-item>
            <el-form-item label="交易定性" prop="trade_characterization">
              <el-tag
                v-for="(item, index) in form.trade_characterization"
                :key="index"
                type="primary"
                style="margin-right: 6px;"
              >
                {{ item }}
              </el-tag>
            </el-form-item>
            <el-form-item label="所属板块" prop="sector">
              <el-tag
                v-for="(item, index) in form.sector"
                :key="index"
                type="primary"
                style="margin-right: 6px;"
              >
                {{ item }}
              </el-tag>
            </el-form-item>
            <el-form-item label="创建人" prop="create_name">
              {{ form.create_name }}
            </el-form-item>
            <el-form-item label="创建时间" prop="create_time">
              {{ form.create_time }}
            </el-form-item>
          </el-col>
          <el-col :span="24" :md="12">
            <el-form-item label="实时价格" prop="nominal_price">
              {{ normalizeNumber(form.nominal_price) }}
            </el-form-item>
            <el-form-item label="目标价" prop="target_price">
              {{ normalizeNumber(form.target_price) }}
            </el-form-item>
            <el-form-item label="目标空间" align="left" prop="target_range" width="100px">
              {{ form.target_range }}
            </el-form-item>
            <el-form-item label="止损价" prop="stop_loss_price">
              {{ normalizeNumber(form.stop_loss_price) }}
            </el-form-item>
            <el-form-item label="止损空间" prop="stop_loss_range">
              {{ form.stop_loss_range }}
            </el-form-item>
            <el-form-item label="IV" prop="iv_value">
              <span v-if="form.iv_value">{{ form.iv_value }}</span>
              <span v-else style="color: #bbb">暂无</span>
            </el-form-item>
            <el-form-item label="HV" prop="hv_value">
              <span v-if="form.hv_value">{{ form.hv_value }}</span>
              <span v-else style="color: #bbb">暂无</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-divider>股评日志</el-divider>
      <el-form-item label="最新边际变化" prop="latest_marginal_change">
        <div class="form-text-div" v-if="form.latest_marginal_change">
          {{ form.latest_marginal_change }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
      <el-form-item label="后续跟踪重点" prop="main_focus_further_monitoring">
        <div class="form-text-div" v-if="form.main_focus_further_monitoring">
          {{ form.main_focus_further_monitoring }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
      <el-form-item label="正面评价" prop="favorable">
        <div class="form-text-div" v-if="form.favorable">
          {{ form.favorable }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
      <el-form-item label="负面评价" prop="negative">
        <div class="form-text-div" v-if="form.negative">
          {{ form.negative }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
      <el-form-item label="估值逻辑" prop="upside">
        <div class="form-text-div" v-if="form.upside">
          {{ form.upside }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
      <el-form-item label="风险止损策略" prop="risk_exit_strategy">
        <div class="form-text-div" v-if="form.risk_exit_strategy">
          {{ form.risk_exit_strategy }}
        </div>
        <div v-else class="text-placeholder">暂未填写</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDictList, getUserList } from '@/api/stockpool'
import CharacterizationConfig from '@/layout/components/characterizationConfig/index.vue'
import SectorConfig from '@/layout/components/sectorConfig/index.vue'
import StockCodeFlag from '@/components/ItemRow/StockCodeFlag.vue'

export default {
  name: 'StockForm',
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  components: {
    StockCodeFlag,
    CharacterizationConfig,
    SectorConfig
  },
  data() {
    return {
      marketList: this.hashmap.marketList,
    }
  },
  watch: {
    form: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.market) {
          newVal.market_flag = this.findJsonByKeyValue(this.marketList, 'value', newVal.market)?.icon || ''
        }
      }
    }
  },

  created() {
    console.log('form数据:', this.form)
    this.form.market_flag = this.findJsonByKeyValue(this.marketList, 'value', this.form.market)?.icon || ''
  },
  methods: {}
}
</script>
<style>
.form-text-div {
  white-space: pre-line;
  word-wrap: break-word;
  word-break: normal;
  line-height: 2.05;
  text-align: left;
  color: #000;
  border-radius: 2px;
}

.text-placeholder {
  color: #bbb;
}
</style>
